<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="部门列表"
      row-key="path"
      :indent="30"
      :request-api="getTableList"
      :columns="columns"
      :pagination="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增部门 </el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)"> 查看 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete"> 删除 </el-button>
      </template>
    </ProTable>
    <DeptDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="deptMange">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus, View } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { getDeptList, saveDept, editDept, Dept } from "@/api/system/dept";
import DeptDrawer from "./detail.vue";

const proTable = ref();

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getDeptList(newParams);
};

const drawerRef = ref<InstanceType<typeof DeptDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Dept.ReqDept> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? saveDept : title === "编辑" ? editDept : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};

// 表格配置项
const columns: ColumnProps[] = [
  { type: "sort", label: "排序", width: 80 },
  { prop: "deptName", label: "部门名称" },
  { prop: "createBy", label: "创建人" },
  { prop: "createTime", label: "创建时间" },
  { prop: "updateBy", label: "更新人" },
  { prop: "updateTime", label: "更新时间" },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
</script>
